import Taro, { Component, Config } from "@tarojs/taro";
import { View, Text, Map } from "@tarojs/components";
import "./index.scss";
// import { AtAccordion, AtList, AtListItem } from 'taro-ui'

 

export default class Index extends Component {
  config: Config = {
    navigationBarTitleText: "水环境数据服务平台DEMO",
  };

  constructor(props) {
    super(props);
    this.state = {
      open: false,
      defaultLocation: {
        latitude: "27.7342868",
        longitude: "114.0490722",
        scale: "10",
      },
      polygon: [
        {
          points: [
          
{ longitude: 113.858135399999995, latitude: 27.544118999999998},
{ longitude: 113.859238899999994, latitude: 27.547581099999999},
{ longitude: 113.869000900000003, latitude: 27.5558598},
{ longitude: 113.875197600000007, latitude: 27.5576659},
{ longitude: 113.880969899999997, latitude: 27.558343199999999},
{ longitude: 113.882667699999999, latitude: 27.5573649},
{ longitude: 113.883856100000003, latitude: 27.5551824},
{ longitude: 113.886232899999996, latitude: 27.555634000000001},
{ longitude: 113.886827100000005, latitude: 27.5575154},
{ longitude: 113.886232899999996, latitude: 27.560074100000001},
{ longitude: 113.883177000000003, latitude: 27.565341799999999},
{ longitude: 113.884385600000002, latitude: 27.568269600000001},
{ longitude: 113.882945000000007, latitude: 27.571142900000002},
{ longitude: 113.884025399999999, latitude: 27.580294200000001},
{ longitude: 113.889787699999999, latitude: 27.583167100000001},
{ longitude: 113.894829700000003, latitude: 27.5882744},
{ longitude: 113.899151500000002, latitude: 27.588593500000002},
{ longitude: 113.9058742, latitude: 27.586572},
{ longitude: 113.912116699999999, latitude: 27.591785399999999},
{ longitude: 113.916078200000001, latitude: 27.5915727},
{ longitude: 113.919919800000002, latitude: 27.586572},
{ longitude: 113.925922200000002, latitude: 27.5874232},
{ longitude: 113.930123899999998, latitude: 27.590402300000001},
{ longitude: 113.934685700000003, latitude: 27.590189500000001},
{ longitude: 113.941168300000001, latitude: 27.5873168},
{ longitude: 113.946570500000007, latitude: 27.581890300000001},
{ longitude: 113.947650899999999, latitude: 27.5869976},
{ longitude: 113.951492400000006, latitude: 27.587636},
{ longitude: 113.952452800000003, latitude: 27.5862528},
{ longitude: 113.951132299999998, latitude: 27.5836991},
{ longitude: 113.954373599999997, latitude: 27.583592700000001},
{ longitude: 113.955093899999994, latitude: 27.585827200000001},
{ longitude: 113.951972600000005, latitude: 27.590721500000001},
{ longitude: 113.951252299999993, latitude: 27.595083599999999},
{ longitude: 113.947890999999998, latitude: 27.597636999999999},
{ longitude: 113.949211500000004, latitude: 27.599339199999999},
{ longitude: 113.951732500000006, latitude: 27.599126500000001},
{ longitude: 113.954493600000006, latitude: 27.597636999999999},
{ longitude: 113.955093899999994, latitude: 27.599126500000001},
{ longitude: 113.951852599999995, latitude: 27.6012542},
{ longitude: 113.947530799999996, latitude: 27.599764799999999},
{ longitude: 113.944529599999996, latitude: 27.600190300000001},
{ longitude: 113.945009799999994, latitude: 27.6025308},
{ longitude: 113.949091499999994, latitude: 27.603169099999999},
{ longitude: 113.950051900000005, latitude: 27.606892500000001},
{ longitude: 113.954973800000005, latitude: 27.6056159},
{ longitude: 113.957494800000006, latitude: 27.6084882},
{ longitude: 113.959535599999995, latitude: 27.613275099999999},
{ longitude: 113.962536900000003, latitude: 27.6160408},
{ longitude: 113.963857399999995, latitude: 27.618593700000002},
{ longitude: 113.966618499999996, latitude: 27.6188064},
{ longitude: 113.972740900000005, latitude: 27.618487300000002},
{ longitude: 113.973581300000006, latitude: 27.619551000000001},
{ longitude: 113.968299200000004, latitude: 27.620295599999999},
{ longitude: 113.969139499999997, latitude: 27.621997499999999},
{ longitude: 113.974301600000004, latitude: 27.622210200000001},
{ longitude: 113.978743300000005, latitude: 27.626783799999998},
{ longitude: 113.978383199999996, latitude: 27.629974600000001},
{ longitude: 113.976582500000006, latitude: 27.635611399999998},
{ longitude: 113.971300400000004, latitude: 27.636249500000002},
{ longitude: 113.9714204, latitude: 27.6413543},
{ longitude: 113.979463600000003, latitude: 27.6428431},
{ longitude: 113.982464800000002, latitude: 27.653689799999999},
{ longitude: 113.986066300000005, latitude: 27.658155799999999},
{ longitude: 113.985586100000006, latitude: 27.6632596},
{ longitude: 113.988947400000001, latitude: 27.6671935},
{ longitude: 113.985466000000002, latitude: 27.673359999999999},
{ longitude: 113.985466000000002, latitude: 27.677825200000001},
{ longitude: 113.9891875, latitude: 27.681120799999999},
{ longitude: 113.987746900000005, latitude: 27.689518799999998},
{ longitude: 113.986066300000005, latitude: 27.695258899999999},
{ longitude: 113.984265600000001, latitude: 27.6966407},
{ longitude: 113.984865799999994, latitude: 27.6997231},
{ longitude: 113.984505600000006, latitude: 27.701211199999999},
{ longitude: 113.979943800000001, latitude: 27.701211199999999},
{ longitude: 113.978519399999996, latitude: 27.7057954},
{ longitude: 113.979463600000003, latitude: 27.7063463},
{ longitude: 113.980665200000004, latitude: 27.707923099999999},
{ longitude: 113.980836800000006, latitude: 27.708949},
{ longitude: 113.981995499999996, latitude: 27.708417099999998},
{ longitude: 113.981995499999996, latitude: 27.709974800000001},
{ longitude: 113.980944100000002, latitude: 27.711342500000001},
{ longitude: 113.983665299999998, latitude: 27.714071400000002},
{ longitude: 113.986244200000002, latitude: 27.713698099999998},
{ longitude: 113.9882183, latitude: 27.712330399999999},
{ longitude: 113.990149500000001, latitude: 27.712254399999999},
{ longitude: 113.996586800000003, latitude: 27.713508099999999},
{ longitude: 114.000234599999999, latitude: 27.7157497},
{ longitude: 114.001264500000005, latitude: 27.717117300000002},
{ longitude: 114.004998200000003, latitude: 27.717003399999999},
{ longitude: 114.006714799999997, latitude: 27.718485000000001},
{ longitude: 114.009590099999997, latitude: 27.7175732},
{ longitude: 114.012716900000001, latitude: 27.718534900000002},
{ longitude: 114.018516500000004, latitude: 27.7217901},
{ longitude: 114.020447700000005, latitude: 27.722359999999998},
{ longitude: 114.021735100000001, latitude: 27.7219041},
{ longitude: 114.021263099999999, latitude: 27.724487400000001},
{ longitude: 114.022979699999993, latitude: 27.724867199999998},
{ longitude: 114.024052600000005, latitude: 27.7261968},
{ longitude: 114.025511699999996, latitude: 27.7263488},
{ longitude: 114.027843000000004, latitude: 27.728311399999999},
{ longitude: 114.029932000000002, latitude: 27.728628},
{ longitude: 114.030484099999995, latitude: 27.731393000000001},
{ longitude: 114.033494000000005, latitude: 27.7333003},
{ longitude: 114.035526099999998, latitude: 27.733305600000001},
{ longitude: 114.038729599999996, latitude: 27.734477900000002},
{ longitude: 114.043879500000003, latitude: 27.7380484},
{ longitude: 114.047312700000006, latitude: 27.7394538},
{ longitude: 114.0516042, latitude: 27.739225900000001},
{ longitude: 114.054265000000001, latitude: 27.741201},
{ longitude: 114.0603804, latitude: 27.7438407},
{ longitude: 114.060766700000002, latitude: 27.745682800000001},
{ longitude: 114.062828100000004, latitude: 27.7467264},
{ longitude: 114.066075999999995, latitude: 27.7446886},
{ longitude: 114.077423199999998, latitude: 27.754575800000001},
{ longitude: 114.0823362, latitude: 27.7564028},
{ longitude: 114.100158699999994, latitude: 27.759353300000001},
{ longitude: 114.104041699999996, latitude: 27.763706299999999},
{ longitude: 114.106376699999998, latitude: 27.768060800000001},
{ longitude: 114.109756200000007, latitude: 27.7767713},
{ longitude: 114.120597700000005, latitude: 27.771703800000001},
{ longitude: 114.124969699999994, latitude: 27.7641238},
{ longitude: 114.132438699999994, latitude: 27.756995799999999},
{ longitude: 114.137077199999993, latitude: 27.750791299999999},
{ longitude: 114.141448699999998, latitude: 27.744815800000001},
{ longitude: 114.147117699999995, latitude: 27.740674800000001},
{ longitude: 114.164657700000006, latitude: 27.7323743},
{ longitude: 114.1705702, latitude: 27.724330800000001},
{ longitude: 114.181106200000002, latitude: 27.709392300000001},
{ longitude: 114.184966700000004, latitude: 27.7027298},
{ longitude: 114.189849699999996, latitude: 27.695604299999999},
{ longitude: 114.201682700000006, latitude: 27.682267800000002},
{ longitude: 114.2042462, latitude: 27.676294299999999},
{ longitude: 114.207832199999999, latitude: 27.667108299999999},
{ longitude: 114.203163200000006, latitude: 27.6570243},
{ longitude: 114.198486200000005, latitude: 27.651988800000002},
{ longitude: 114.190224200000003, latitude: 27.647878299999999},
{ longitude: 114.189941200000007, latitude: 27.641454800000002},
{ longitude: 114.197662199999996, latitude: 27.632716800000001},
{ longitude: 114.2043532, latitude: 27.627424300000001},
{ longitude: 114.221336199999996, latitude: 27.617511799999999},
{ longitude: 114.228042700000003, latitude: 27.614740300000001},
{ longitude: 114.231101699999996, latitude: 27.6050948},
{ longitude: 114.237533200000001, latitude: 27.5997983},
{ longitude: 114.246276699999996, latitude: 27.5924318},
{ longitude: 114.252197199999998, latitude: 27.588743300000001},
{ longitude: 114.263511699999995, latitude: 27.579530800000001},
{ longitude: 114.248512199999993, latitude: 27.566495799999998},
{ longitude: 114.240249700000007, latitude: 27.5635373},
{ longitude: 114.231727699999993, latitude: 27.5610368},
{ longitude: 114.221649200000002, latitude: 27.5541798},
{ longitude: 114.216720699999996, latitude: 27.544557300000001},
{ longitude: 114.211036699999994, latitude: 27.5409018},
{ longitude: 114.195266700000005, latitude: 27.526714299999998},
{ longitude: 114.188293200000004, latitude: 27.520994300000002},
{ longitude: 114.188766200000003, latitude: 27.512044800000002},
{ longitude: 114.188743700000003, latitude: 27.500112300000001},
{ longitude: 114.187683199999995, latitude: 27.489099299999999},
{ longitude: 114.187660199999996, latitude: 27.484050799999999},
{ longitude: 114.180419700000002, latitude: 27.4762688},
{ longitude: 114.175750699999995, latitude: 27.465493800000001},
{ longitude: 114.169021700000002, latitude: 27.453805299999999},
{ longitude: 114.162559200000004, latitude: 27.446248300000001},
{ longitude: 114.155586200000002, latitude: 27.4439703},
{ longitude: 114.147857700000003, latitude: 27.439166799999999},
{ longitude: 114.135742199999996, latitude: 27.4364393},
{ longitude: 114.125427200000004, latitude: 27.435771800000001},
{ longitude: 114.115386700000002, latitude: 27.436710300000001},
{ longitude: 114.1061172, latitude: 27.435123300000001},
{ longitude: 114.087432800000002, latitude: 27.434928200000002},
{ longitude: 114.087310700000003, latitude: 27.4349268},
{ longitude: 114.080612200000004, latitude: 27.433334299999999},
{ longitude: 114.056922700000001, latitude: 27.4361268},
{ longitude: 114.044296200000005, latitude: 27.436145799999998},
{ longitude: 114.033218199999993, latitude: 27.4347858},
{ longitude: 114.024917099999996, latitude: 27.428615300000001},
{ longitude: 114.012601399999994, latitude: 27.431836400000002},
{ longitude: 114.007884700000005, latitude: 27.4285803},
{ longitude: 113.999674299999995, latitude: 27.431061100000001},
{ longitude: 113.996180499999994, latitude: 27.432301500000001},
{ longitude: 113.989367599999994, latitude: 27.427495},
{ longitude: 113.978536800000001, latitude: 27.431526300000002},
{ longitude: 113.969278200000005, latitude: 27.4386583},
{ longitude: 113.960893100000007, latitude: 27.444704600000001},
{ longitude: 113.958796800000002, latitude: 27.454936100000001},
{ longitude: 113.954254899999995, latitude: 27.464856600000001},
{ longitude: 113.947092600000005, latitude: 27.463461599999999},
{ longitude: 113.932942699999998, latitude: 27.4651666},
{ longitude: 113.927701999999996, latitude: 27.4620666},
{ longitude: 113.920714399999994, latitude: 27.462841600000001},
{ longitude: 113.920539700000006, latitude: 27.4592764},
{ longitude: 113.918093999999996, latitude: 27.452920899999999},
{ longitude: 113.920190300000002, latitude: 27.4482702},
{ longitude: 113.919316899999998, latitude: 27.443309299999999},
{ longitude: 113.920190300000002, latitude: 27.436022600000001},
{ longitude: 113.921587799999998, latitude: 27.431061100000001},
{ longitude: 113.914774899999998, latitude: 27.426874699999999},
{ longitude: 113.905167000000006, latitude: 27.4208274},
{ longitude: 113.905516300000002, latitude: 27.412143499999999},
{ longitude: 113.896607099999997, latitude: 27.411213100000001},
{ longitude: 113.888221999999999, latitude: 27.408576700000001},
{ longitude: 113.881409099999999, latitude: 27.4119885},
{ longitude: 113.880011600000003, latitude: 27.418501500000001},
{ longitude: 113.878439400000005, latitude: 27.4231534},
{ longitude: 113.874945600000004, latitude: 27.4233084},
{ longitude: 113.871102399999998, latitude: 27.419896999999999},
{ longitude: 113.859747499999997, latitude: 27.422533099999999},
{ longitude: 113.859747499999997, latitude: 27.42765},
{ longitude: 113.852759899999995, latitude: 27.433541900000002},
{ longitude: 113.851711800000004, latitude: 27.437883100000001},
{ longitude: 113.856603100000001, latitude: 27.4394335},
{ longitude: 113.856952500000006, latitude: 27.441604000000002},
{ longitude: 113.853808099999995, latitude: 27.444549599999998},
{ longitude: 113.856777800000003, latitude: 27.446874999999999},
{ longitude: 113.852235800000003, latitude: 27.448890299999999},
{ longitude: 113.841405100000003, latitude: 27.445634800000001},
{ longitude: 113.839308799999998, latitude: 27.447340100000002},
{ longitude: 113.8394835, latitude: 27.453385900000001},
{ longitude: 113.838610000000003, latitude: 27.4552461},
{ longitude: 113.834068099999996, latitude: 27.457261299999999},
{ longitude: 113.835989699999999, latitude: 27.462686600000001},
{ longitude: 113.831447699999998, latitude: 27.468731600000002},
{ longitude: 113.831797199999997, latitude: 27.4767911},
{ longitude: 113.829646100000005, latitude: 27.481163599999999},
{ longitude: 113.831622400000001, latitude: 27.483903300000001},
{ longitude: 113.829583999999997, latitude: 27.485704399999999},
{ longitude: 113.828738900000005, latitude: 27.487137199999999},
{ longitude: 113.830910099999997, latitude: 27.487787900000001},
{ longitude: 113.8310338, latitude: 27.4884646},
{ longitude: 113.830823899999999, latitude: 27.489390400000001},
{ longitude: 113.830123599999993, latitude: 27.489992900000001},
{ longitude: 113.829104999999998, latitude: 27.4907647},
{ longitude: 113.829083800000006, latitude: 27.4914801},
{ longitude: 113.830123599999993, latitude: 27.491611800000001},
{ longitude: 113.830930100000003, latitude: 27.491197700000001},
{ longitude: 113.831587900000002, latitude: 27.490463500000001},
{ longitude: 113.832670199999995, latitude: 27.490538799999999},
{ longitude: 113.833985999999996, latitude: 27.489917599999998},
{ longitude: 113.835089499999995, latitude: 27.488675099999998},
{ longitude: 113.836001999999993, latitude: 27.4885433},
{ longitude: 113.836277899999999, latitude: 27.488938600000001},
{ longitude: 113.837721000000002, latitude: 27.488693900000001},
{ longitude: 113.8384638, latitude: 27.489070399999999},
{ longitude: 113.838166700000002, latitude: 27.490218800000001},
{ longitude: 113.837169200000005, latitude: 27.491197700000001},
{ longitude: 113.835471499999997, latitude: 27.4917813},
{ longitude: 113.834325500000006, latitude: 27.493776700000002},
{ longitude: 113.83475, latitude: 27.4951133},
{ longitude: 113.835513899999995, latitude: 27.495282700000001},
{ longitude: 113.836617500000003, latitude: 27.494962699999999},
{ longitude: 113.8384638, latitude: 27.4931743},
{ longitude: 113.8419229, latitude: 27.490839999999999},
{ longitude: 113.843684300000007, latitude: 27.491517699999999},
{ longitude: 113.844045100000002, latitude: 27.492214300000001},
{ longitude: 113.843344700000003, latitude: 27.493757899999999},
{ longitude: 113.842092699999995, latitude: 27.494398},
{ longitude: 113.839779500000006, latitude: 27.4948686},
{ longitude: 113.8382091, latitude: 27.4965063},
{ longitude: 113.837657300000004, latitude: 27.497880500000001},
{ longitude: 113.839002199999996, latitude: 27.499390399999999},
{ longitude: 113.841613199999998, latitude: 27.4985918},
{ longitude: 113.851547199999999, latitude: 27.4930278},
{ longitude: 113.857710900000001, latitude: 27.493227900000001},
{ longitude: 113.867048499999996, latitude: 27.489161599999999},
{ longitude: 113.871377699999996, latitude: 27.489312200000001},
{ longitude: 113.8723964, latitude: 27.491420600000001},
{ longitude: 113.867727599999995, latitude: 27.495260900000002},
{ longitude: 113.864417000000003, latitude: 27.501134100000002},
{ longitude: 113.864162300000004, latitude: 27.505802299999999},
{ longitude: 113.867812499999999, latitude: 27.5091903},
{ longitude: 113.873075400000005, latitude: 27.510696100000001},
{ longitude: 113.868236899999999, latitude: 27.513180599999998},
{ longitude: 113.869085799999993, latitude: 27.5158156},
{ longitude: 113.875027799999998, latitude: 27.517246},
{ longitude: 113.876640699999996, latitude: 27.5192786},
{ longitude: 113.876131400000006, latitude: 27.521386499999998},
{ longitude: 113.873245199999999, latitude: 27.522214600000002},
{ longitude: 113.867218300000005, latitude: 27.520784299999999},
{ longitude: 113.863313500000004, latitude: 27.519655},
{ longitude: 113.860681999999997, latitude: 27.5213112},
{ longitude: 113.857880699999995, latitude: 27.520934799999999},
{ longitude: 113.856437600000007, latitude: 27.517697699999999},
{ longitude: 113.853211900000005, latitude: 27.517772999999998},
{ longitude: 113.849391999999995, latitude: 27.520558399999999},
{ longitude: 113.848458300000004, latitude: 27.524698799999999},
{ longitude: 113.847609399999996, latitude: 27.536742700000001},
{ longitude: 113.851174700000001, latitude: 27.5402804},
          ],
          strokeColor: "#DC143C",
          // fillColor: "#EE765E",
          strokeWidth: 3,
          zIndex: 1,
        },
      ],
      circle: [
        {
          latitude: 31.118,
          longitude: 121.38,
          radius: 200,
          strokeWidth: 2,
          strokeColor: "#EE765E",
          fillColor: "#EE765E"
        },
      ],
      marker:[
        {
          title:"紫西河监测点\n114.1261498\n27.7342868",
          longitude: "114.1261498", 
          latitude: "27.7342868",
        },
      ],
    };
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {
    Taro.request({
      // url: "http://47.99.77.35:8086/api/AcScs/list?format=json",
      url: "http://47.99.77.35:8086/api/ALM/syparam?stcd=00044367000000000003&format=json",
      // data: {
      //   x: "",
      //   y: "",
      // },
      header: {
        "content-type": "application/json", // 默认值
      },
      success: (res) => {
        this.setState(
          {
            marker:[
              {
                title:"nearstcd:\n"+res.data.data.nearstcd+"\nlng:"+res.data.data.nearlng+"\nlat:"+res.data.data.nearlat,
                longitude: res.data.data.nearlng, 
                latitude: res.data.data.nearlat,
              },
              {
                title:"测试点\n27.555764420824236\n114.06417846679688\nTime 20-03-31 07:43:00\nWt   17.3\nPh   6.91\nDox   20\nCtwq   14.6224\nZd   109.14",
                latitude: "27.555764420824236",
                longitude: "114.06417846679688",
              },
            ],
          }
        )
        console.log("get from API", res.data);
      },
    });

    // Taro.getLocation({
    //   type: "gcj02",
    //   success: (res) => {
    //     console.log("打印当前地点信息", res);
    //     //将定位设置为当前所在位置
    //     this.setState({
    //       clickLocation: {
    //         latitude : res.latitude,
    //         longitude : res.longitude,
    //         scale: "16",
    //       },
    //     })
    //   },
    // });
  }

  componentDidHide() {}

  onTap = (e) => {
    this.setState({
          clickLocation: {
            latitude : e.detail.latitude,
            longitude : e.detail.longitude,
            scale: "16",
          }, 
    })
  };


  render() {
    const { defaultLocation, polygon, circle, marker,clickLocation } = this.state;
    console.log("渲染时", clickLocation);
    return (
      <View className="index">
        <Map
          className="mapContainer"
          longitude={defaultLocation.longitude}
          latitude={defaultLocation.latitude}
          scale={defaultLocation.scale}
          // bindcontroltap="controltap"
          // bindmarkertap="markertap"
          // bindregionchange="regionchange"
          show-location
          onTap={() => console.log("hi")}
          onMarkerTap={(e) => console.log(e.detail.markerId)}
          // onMarkerTap={this.onTap}
          onClick={this.onTap}
          polygons={polygon}
          circles={circle}
          markers={marker}
          layer-style="3"
        ></Map>
        <View className="sub-title">点击显示经纬度</View>
        <View className="location">{clickLocation.longitude},{clickLocation.latitude}</View>
      </View>
    );
  }
}
